<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery UI Draggable 和 Droppable 示例</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 jQuery UI -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
    <!-- 引入 jQuery UI 的 CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        #component-library {
            width: 200px;
            border: 2px solid #ccc;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .component {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            cursor: move;
        }
        #drop-area {
            flex: 1;
            border: 2px solid #ccc;
            padding: 10px;
            background-color: #f9f9f9;
            min-height: 300px;
        }
        .dropped-item {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #ffcc00;
            color: black;
            text-align: center;
        }
        #save-result {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #save-result:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 组件库 -->
        <div id="component-library">
            <div class="component" data-type="text">文本</div>
            <div class="component" data-type="image">图片</div>
            <div class="component" data-type="button">按钮</div>
        </div>
        <!-- 放置区域 -->
        <div id="drop-area"></div>
    </div>
    <button id="save-result">保存结果</button>

    <script>
        $(document).ready(function () {
            // 初始化组件库中的组件为可拖拽
            $(".component").draggable({
                helper: "clone", // 拖拽时克隆组件
                cursor: "move",
                //revert: "invalid" // 如果拖拽无效，组件会回到原位置
            });

            // 初始化放置区域为可放置
            $("#drop-area").droppable({
                accept: ".component", // 接受组件库中的组件
                drop: function (event, ui) {
                    const type = ui.draggable.data("type"); // 获取组件类型
                    let newItem;

                    // 根据组件类型生成内容
                    if (type === "text") {
                        newItem = $('<div class="draggable-item">这是一个文本组件</div>');
                    } else if (type === "image") {
                        newItem = $('<div class="draggable-item"><img src="https://via.placeholder.com/100" alt="图片"></div>');
                    } else if (type === "button") {
                        newItem = $('<div class="draggable-item"><button type="button">按钮</button></div>');
                    }

                    // 将新内容添加到放置区域
                    $(this).append(newItem);

                    $(".draggable-item").draggable({
                containment: "#container", // 限制拖拽范围
                //revert: "invalid", // 如果拖拽无效，元素会回到原位置
                cursor: "move", // 拖拽时的光标
                start: function (event, ui) {
                    console.log("拖拽开始");
                },
                stop: function (event, ui) {
                    console.log("拖拽结束");
                    console.log("ui",ui);
                }
            });
                }
            });

            // 保存结果
            $("#save-result").click(function () {
                const result = [];
                $("#drop-area .dropped-item").each(function () {
                    const text = $(this).text();
                    const img = $(this).find("img").attr("src");
                    const button = $(this).find("button").text();
                    if (text) {
                        result.push({ type: "text", content: text });
                    } else if (img) {
                        result.push({ type: "image", content: img });
                    } else if (button) {
                        result.push({ type: "button", content: button });
                    }
                });
                console.log("放置区域内容：", result); // 打印结果到控制台
                alert('结果已保存，查看控制台输出');
            });
        });
    </script>
</body>
</html>